<template>
  <mu-paper class="avator-uoload-wrap">
     

      <my-upload field="img"
            @crop-success="cropSuccess"
            @crop-upload-success="cropUploadSuccess"
            @crop-upload-fail="cropUploadFail"
            v-model="show"
            :width="300"
            :height="300"
             url=""
            :params="params"
            img-format="png">
      </my-upload>
      <div class="img-wrap">
        <img :src="imgDataUrl">
      </div>
      <mu-raised-button fullWidth label="设置头像" @click="toggleShow" primary/>
  </mu-paper>
</template>

<script>
import 'babel-polyfill' // es6 shim
import myUpload from 'vue-image-crop-upload'
export default {
  components: {
    'my-upload': myUpload
  },
  data () {
    return {
      show: false,
      params: {
        token: '123456798',
        name: 'avatar'
      },
      imgDataUrl: '' // the datebase64 url of created image
    }
  },

  methods: {
    toggleShow () {
      this.show = !this.show
    },
    /**
* crop success
*
* [param] imgDataUrl
* [param] field
*/
    cropSuccess (imgDataUrl, field) {
      console.log('-------- crop success --------')
      this.imgDataUrl = imgDataUrl
    },
    /**
     * upload success
     *
     * [param] jsonData   服务器返回数据，已进行json转码
     * [param] field
     */
    cropUploadSuccess (jsonData, field) {
      console.log('-------- upload success --------')
      console.log(jsonData)
      console.log('field: ' + field)
    },
    /**
     * upload fail
     *
     * [param] status    server api return error status, like 500
     * [param] field
     */
    cropUploadFail (status, field) {
      console.log('-------- upload fail --------')
      console.log(status)
      console.log('field: ' + field)
    }
  }
}
</script>

<style scoped>
.avator-uoload-wrap {
  margin-top: 30px;
  padding: 20px;
}

.img-wrap {
  text-align: center;
  margin-bottom: 30px;
}
</style>